﻿<template>
  <div class="account-info">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
      <el-breadcrumb-item @click="()=>{open =1}">账号信息</el-breadcrumb-item>
      <el-breadcrumb-item v-if="open === 3"> 登陆密码</el-breadcrumb-item>
      <el-breadcrumb-item v-if="open === 6"> 绑定手机</el-breadcrumb-item>
      <el-breadcrumb-item v-if="open === 2"> 绑定邮箱</el-breadcrumb-item>
      <el-breadcrumb-item v-if="open === 4"> 支付密码</el-breadcrumb-item>
      <el-breadcrumb-item v-if="open === 5"> 身份认证</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!--     初始页面展示   -->
    <div class="open" v-if="open === 1">
      <div class="password-form-container">
        <div class="password-container">
          <div class="icon">
            <i class="el-icon-success"></i>
          </div>
          <div class="text">
            <span class="title">登录密码</span>
            <span class="detail">
                    建议您定期更换密码，且设置一个包含数字和字母，并长度超过6位以上的密码。
                  </span>
          </div>
          <div class="operation">
            <el-button
                type="text"
                style="color: #ffd700; font-size: 18px; font-weight: bolder"
                @click="() => {this.open = 3}"
            >修改<i class="el-icon-d-arrow-right"></i
            ></el-button>
          </div>
        </div>
      </div>

      <el-divider></el-divider>
      <div class="phone-form-container" >
        <div class="phone-container">
          <div class="icon">
            <i class="el-icon-success"></i>
          </div>
          <div class="text">
            <span class="title">绑定手机</span>
            <span class="detail">
                    绑定手机后，您即可享受丰富的手机服务，如手机找回密码等。
                  </span>
          </div>
          <div class="operation">
            <el-button
                type="text"
                style="color: #ffd700; font-size: 18px; font-weight: bolder"
                @click="() => {this.open = 6}"
            >修改<i class="el-icon-d-arrow-right"></i
            ></el-button>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="email-form-container">
        <div class="email-container">
          <div class="icon">
            <i class="el-icon-success"></i>
          </div>
          <div class="text">
            <span class="title">绑定邮箱</span>
            <span class="detail">
                        绑定邮箱后，您即可享受丰富的邮箱服务，如邮箱找回密码等。
                      </span>
          </div>
          <div class="operation">
            <el-button
                type="text"
                style="color: #ffd700; font-size: 18px; font-weight: bolder"
                @click="() => {this.open = 2}"
            >修改<i class="el-icon-d-arrow-right"></i
            ></el-button>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="PayPassword-form-container">
        <div class="PayPassword-container">
          <div class="icon">
            <i class="el-icon-success"></i>
          </div>
          <div class="text">
            <span class="title">支付密码</span>
            <span class="detail">
                        在您使用您的钱包在平台进行交易时，支付密码保护您的资金安全
                      </span>
          </div>
          <div class="operation">
            <el-button
                type="text"
                style="color: #ffd700; font-size: 18px; font-weight: bolder"
                @click="() => {this.open = 4}"
            >修改<i class="el-icon-d-arrow-right"></i
            ></el-button>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="identity-form-container">
        <div class="identity-container">
          <div class="icon">
            <i class="el-icon-success"></i>
          </div>
          <div class="text">
            <span class="title">身份认证</span>
            <span class="detail">
                        为了您的资金安全，需进行身份认证后，才可进行提现操作
                      </span>
          </div>
          <div class="operation">
            <el-button
                type="text"
                style="color: #ffd700; font-size: 18px; font-weight: bolder"
                @click="() => {this.open = 5}"
            >修改<i class="el-icon-d-arrow-right"></i
            ></el-button>
          </div>
        </div>
      </div>
    </div>
    <!--     绑定邮箱   -->
    <div title="绑定邮箱" class="email-form"  v-if="open === 2">
      <el-form
          :model="emailForm"
          :rules="rules"
          ref="emailForm"
          label-width="300px"
          class="demo-ruleForm"
      >
        <el-form-item prop="email" label="邮箱">
          <el-input
              v-model="emailForm.email"
              placeholder="请输入邮箱"
              :style="{ width: '30%' }"
          ></el-input>
        </el-form-item>
        <el-form-item prop="captcha" label="验证码">
          <el-input v-model="emailForm.captcha"
                    :style="{ width: '40%' }"
          >
            <el-button
                @click="changeDialogCaptchaVisible(emailForm.email)"
                :disabled="isRun"
                slot="append"
            >{{ isRun ? runTime + "s后重新发送" : "发送验证码" }}</el-button
            >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="()=>{this.open = 1}">取 消</el-button>
          <el-button type="primary" @click="submitEmailForm()">提交</el-button>
        </el-form-item>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="EmailOpen = false,open = true">取 消</el-button>
        <el-button type="primary" @click=", open=true,PhoneOpen = false"
          >确 定</el-button
        >
      </div> -->
    </div>
    <!--     修改密码   -->
    <div title="修改密码" v-if = "open === 3">
      <el-form
          ref="passwordForm"
          :model="passwordForm"
          :rules="rules"
          size="medium"
          label-width="300px"
      >
        <el-form-item label="旧密码" prop="originalPassword">
          <el-input
              v-model="passwordForm.originalPassword"
              placeholder="请输入旧密码"
              clearable
              show-password
              :style="{ width: '30%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="password">
          <el-input
              v-model="passwordForm.password"
              placeholder="请输入新密码"
              clearable
              show-password
              :style="{ width: '30%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="rePassword">
          <el-input
              v-model="passwordForm.rePassword"
              placeholder="请输入新密码"
              clearable
              show-password
              :style="{ width: '30%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="()=>{this.open = 1}">取 消</el-button>
        <el-button type="primary" @click="submitPasswordForm()"
        >确 定</el-button
        >
      </div>
    </div>
    <!--     支付密码   -->
    <div title="支付密码" v-if = "open === 4">
      <el-form
          ref="PayPasswordOpenForm"

          :rules="rules"
          size="medium"
          label-width="300px"
      >
        <el-form-item label="原支付旧密码" prop="originalPayPasswordOpen">
          <el-input
              v-model="passwordForm.originalPassword"
              placeholder="请输入原支付旧密码"
              clearable
              show-password
              :style="{ width: '30%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="新支付密码" prop="PayPassword">
          <el-input
              v-model="passwordForm.password"
              placeholder="请输入新支付密码"
              clearable
              show-password
              :style="{ width: '30%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认新密码" prop="PayPassword">
          <el-input
              v-model="passwordForm.rePassword"
              placeholder="请输入新密码"
              clearable
              show-password
              :style="{ width: '30%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="()=>{this.open = 1}">取 消</el-button>
        <el-button type="primary"
        >确 定</el-button
        >
      </div>
    </div>
    <!--     身份认证   -->
    <div title="身份认证" v-if = "open === 5">
      <el-form
          ref="identityForm"

          :rules="rules"
          size="medium"
          label-width="300px"
      >
        <el-form-item label="身份证号" prop="identityForm">
          <el-input
              v-model="passwordForm.originalPassword"
              placeholder="请输入身份证号码"
              clearable
              show-password
              :style="{ width: '30%' }"
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
              v-model="passwordForm.password"
              placeholder="请输入姓名"
              clearable
              show-password
              :style="{ width: '30%' }"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="()=>{this.open = 1}">取 消</el-button>
        <el-button type="primary"
        >确 定</el-button
        >
      </div>
    </div>
    <!--     绑定手机   -->
    <div title="绑定手机" v-if="open === 6">
      <el-form
          :model="phoneForm"
          :rules="rules"
          ref="phoneForm"
          label-width="300px"
          class="demo-ruleForm"
      >
        <el-form-item prop="phone" label="手机号">
          <el-input
              v-model="phoneForm.phone"
              placeholder="请输入手机号"
              :style="{ width: '30%' }"
          ></el-input>
        </el-form-item>

        <el-form-item prop="captcha" label="验证码">
          <el-input v-model="phoneForm.captcha"
                    :style="{ width: '40%' }"
          >
            <el-button
                @click="changeDialogCaptchaVisible(phoneForm.phone)"
                :disabled="isRun"
                slot="append"
            >{{ isRun ? runTime + "s后重新发送" : "发送验证码" }}</el-button
            >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="()=>{this.open = 1}">取 消</el-button>
        <el-button type="primary" @click="submitPhoneForm()">确 定</el-button>
      </div>
    </div>
  </div>

</template>

<script>


export default {
  name: "AccountInformation",
  data() {
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else if (!validPassword(value)) {
        callback(
            new Error(
                "密码必须在8-20位，必须包含大小写字母和数字且不能有特殊字符！"
            )
        );
      } else {
        if (this.passwordForm.rePassword !== "") {
          this.$refs["passwordForm"].validateField("rePassword");
        }
        callback();
      }
    };
    var validateRePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.passwordForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    // var originalPassword = (rule, value, callback) => {
    //   if (value === "") {
    //     callback(new Error("请再次输入新密码"));
    //   } else if (value !== this.passwordForm.password) {
    //     callback(new Error("两次输入密码不一致!"));
    //   } else {
    //     callback();
    //   }
    // };
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (validPhone(value)) {
        this.checkAccount(value).then((res) => {
          if (res) {
            callback(new Error("该手机号已被绑定！"));
          } else {
            callback();
          }
        });
      } else {
        callback(new Error("请输入正确的手机号"));
      }
    };
    var validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入邮箱账号"));
      } else if (validEmail(value)) {
        this.checkAccount(value).then((res) => {
          if (res) {
            callback(new Error("该邮箱账号已被绑定！"));
          } else {
            callback();
          }
        });
      } else {
        callback(new Error("请输入正确的邮箱账号"));
      }
    };
    return {
      passwordForm: {
        originalPassword : null,
        password: null,
        rePassword: null,
      },
      phoneForm: {
        phone: "",
        captcha: undefined,
      },
      emailForm: {
        email: "",
        captcha: undefined,
      },
      account: "",
      open: 1,
      rules: {
        originalPassword: [
          {
            required: true,
            message: "请输入旧密码",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            validator: validatePassword,
            trigger: "blur",
          },
        ],
        rePassword: [
          {
            required: true,
            validator: validateRePassword,
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            validator: validatePhone,
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            validator: validateEmail,
            trigger: "blur",
          },
        ],
        captcha: [
          {
            required: true,
            message: "请输入手机验证码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  activated(){
    this.open = 1
  },
  methods: {
    backInfo(){

    },
    submitPasswordForm() {
      this.$refs["passwordForm"].validate((valid) => {
        if (!valid) return;
        resetPassword(this.passwordForm).then((res) => {
          if(res.code === 200){
            this.open = 1
            this.$message({
              type: 'success',
              message: '提交成功!'
            });
          }
        });

      });
    },
    submitPhoneForm() {
      this.$refs["phoneForm"].validate(async (valid) => {
        if (!valid) return;
        const { phone, captcha } = this.phoneForm;
        await this.checkSmsCaptcha(phone, captcha);
        if (this.checked) {
          bindPhone(this.phoneForm).then((res) => {
            if(res.code === 200){
              this.open = 1
              this.$message({
                type: 'success',
                message: '绑定成功!'
              });
            }
          });
        } else {
          return;
        }
      });
    },
    submitEmailForm() {
      this.$refs["emailForm"].validate(async (valid) => {
        if (!valid) return;
        const { email, captcha } = this.emailForm;
        await this.checkEmailCaptcha(email, captcha);
        if (this.checked) {
          bindEmail(this.emailForm).then((res) => {
            this.open = 1
            if(res.code){
              this.$message({
                type: 'success',
                message: '绑定成功!'
              });

            }
          });

        } else {
          return;
        }
      });
    },
    countdown() {
      this.changeIsRun();
    },
    click1(){
      this.PassWordOpen= true,
          this.open=false
    }
  },
};
</script>

<style scoped lang="scss">
.account-info {

  width: 100%;
  height: 100%;
  padding: 0 5%;
  padding-bottom: 10px;

}
.password-container,
.phone-container,
.email-container,
.PayPassword-container,
.identity-container {
  width: 1000px;
  height: 40px;
  display: flex;
  align-items: center;

  .icon {
    display: flex;
    align-items: center;
    margin-right: 10px;
    i {
      font-size: 50px;
      color: #67c971;
    }
  }
  .text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    .title {
      color: rgb(60, 60, 60);
      font: {
        size: 20px;
        weight: bolder;
      }
    }
    .detail {
      color: #696969;
    }
  }
  .operation {
    align-self: flex-end;
  }
}
.dialog-footer{
  position: relative;
  left: 250px;
}
.breadCrumb{
  margin-bottom: 20px;
}
</style>
